<template>
  <div class="container new">
     <div class="container-top">
      <div class="top-name">查看商品</div>
    </div>
    <div class="main">
      <div class="table-content1">
       <div class="content-item">
          <div class="table-list">商品分类：{{type }}</div>
          <div class="table-list">商品更新时间：{{information.gmtCreated }}</div>
          <div class="table-list">售卖状态：{{information.status == 'SALE'?'立即上架':'放入仓库'}}</div>
       </div>
      </div>
      <div class="title-desc">商品详细信息</div>
      <div class="group-wrap">
        <div class="group-item">
          <div class="group-title">商品信息</div>
          <div class="group-table">
            <div class="table-m">
              <div class="m-name">商品标题：</div>
              <div class="m-value">{{information.title || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">是否热门商品：</div>
              <div class="m-value">{{information.isHot=='y'?'是':'否'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">是否新品商品：</div>
              <div class="m-value">{{information.isNew =='y'?'是':'否'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">支付方式：</div>
              <div class="m-value">{{returnType(information.productType)}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">供应商：</div>
              <div class="m-value">{{information.supplier || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">生产地：</div>
              <div class="m-value">{{information.productPlace || '暂无信息'}}</div>
            </div>
            <div v-if="information.productType == 'RMB'||information.productType == 'RMB_ORDINARY'" class="table-m">
              <div class="m-name">销售价格：</div>
              <div class="m-value">{{information.salePrice}}</div>
            </div>
             <div v-if="information.productType == 'RMB'||information.productType == 'RMB_ORDINARY'" class="table-m">
              <div class="m-name">成本价格：</div>
              <div class="m-value">{{information.costPrice}}</div>
            </div>
          </div>
        </div>
        <div class="group-item">
          <div class="group-title"></div>
          <div class="group-table">
            <div class="table-m pic">
              <div class="m-name">商品展示图：</div>
              <div class="m-value">
                <ul style="width:400px" class="flex-box-container">
                  <li @click="codeShow(imageUrl1)"
                      :style="{backgroundImage: 'url('+imageUrl1+')'}"
                      style="cursor:pointer;width: 100px;height: 100px;background-size: cover;margin-right: 10px;"
                  >
                  </li>
                </ul>
              </div>
            </div>
             <div class="table-m pic">
              <div class="m-name">商品主图：</div>
              <div class="m-value">
                <ul style="width:400px" class="flex-box-container">
                  <li @click="codeShow(item.fileUrl)"
                    v-for="(item, index) in imageList" :key="index"
                      :style="{backgroundImage: 'url('+item.fileUrl+')'}"
                      style="cursor:pointer;width: 100px;height: 100px;background-size: cover;margin-right: 10px;"
                  >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title-desc">规格</div>
      <div class="group-wrap">
        <div class="group-item">
          <div class="group-title">规格信息</div>
          <div class="group-table">
            <div style="margin-top:20px" class="table-m">
              <div class="m-name">规格：</div>
              <div class="m-value">
                  <div
                        class="category-list"
                        v-for="(item,index) in cateArr"
                        :key="index"
                    >
                    <img
                        @click="codeShow(item.fileUrl)"
                        :src="item.fileUrl"
                        class="avatar"
                    >
                    <div >{{item.name}}</div>
                </div>
              </div>
            </div>
            <div class="table-m">
              <div class="m-name">尺码：</div>
              <div class="m-value">
                <span
                    style="margin-right:10px"
                    v-for="(item,index) in sizeArr"
                    class="mode-list"
                    :key="index"
                    >
                    <span >{{item.name}}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div  class="title-desc">库存价格管理</div>
      <div  class="table-cate">
            <div class="table-head">
            <div class="head-list">颜色</div>
            <div class="head-list">尺码</div>
            <div class="head-list">条码</div>
            <div class="head-list">库存</div>
            <div class="head-list">成本价格</div>
            <div class="head-list">销售价格</div>
            <div class="head-list">是否开启规格</div>
            </div>
            <div
            v-for="(item,index) in information.modelList"
            :key="index"
            class="table-item"
            >
            <div class="table-list">{{item.modelName}}</div>
            <div class="table-list">{{item.modelSize}}</div>
                <div class="table-list">
                <div>{{item.modelCode}}</div>
            </div>
            <div class="table-list">
                <div>{{item.modelStock}}</div>
            </div>
            <div class="table-list">
                <div>{{item.costPrice}}</div>
            </div>
            <div class="table-list">
                <div>{{item.modelSalePrice}}</div>
            </div>
            <div class="table-list">
                <div>{{item.isDistribution == 'y'?'是':'否'}}</div>
            </div>
            </div>
            <div v-if="!information.modelList.length" class="no-data">暂无数据</div>
      </div>
      <div class="title-desc">商品详情图文</div>
      <div style="border:1px solid #ddd;textalign:center" class="detail-text">
          <div v-html="information.detail"></div>
      </div>
      <div class="btns">
        <el-button type="primary" @click="back()">返回</el-button>
      </div>
    </div>
    <el-dialog
        title="查看图片"
        :visible.sync="codeState"
        width="40%">
        <img style="width:100%" :src="codeImg" alt="">
        <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
import $ from "jquery";
export default {
  data() {
    return {
      codeState:false,
      codeImg:'',
      url: "broadcastEdit",
      id: "",
      isEdit: false,
      currentPage: 1,
      upLoadUrl: "",
      // 单张封面
      coverImage: "",
      imageUrl1:"",
      fileList: [],
      bannerArr: [
        {
          name: "首页弹窗广告",
          id: "POP_ADVERTISEMENT"
        },
        {
          name: "首页banner图",
          id: "BANNER"
        }
      ],
      information: {
        costPrice:'',
        category: "",
        firstCategoryParent:"",
        categoryParent: "",
        detail: "",
        id: "",
        imageFileKeys:'',
        exampleImageFileKey:'',
        isHot:'',
        isNew:"",
        modelList: [],
        productCode: "",
        salePrice: "",
        status: "",
        title: "",
        isDistribution:"",
        supplier:'',
        productPlace:'',
        productType:''
      },
      cateArr: [],
      sizeArr: [],
      sortArr: [],
      sortArr1: [],
      imageList:[],
      sortArr2:[],
      rules: {
       
      },
      loading: false,
      currentPage: 1,
      categoryName: "",
      stockNums: "",
      eidtState: false,
      type:''
    };
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  watch: {
  },
  mounted() {
    this.currentPage = this.$router.currentRoute.query.currentPage
      ? this.$router.currentRoute.query.currentPage
      : 1;
    this.id = this.$router.currentRoute.query.id;
    this.type = this.$router.currentRoute.query.type;
    let sessionId = sessionStorage.getItem("sessionId");
    this.getList();
    this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    if (this.id) {
      this.getDetailById();
    }
  },
  methods: {
    returnType(status){
        switch(status){
         case 'GOLD':
           return '红包';
           break;
         case 'SILVER':
           return '银豆';
           break;
        case 'RMB_ORDINARY':
           return '人民币购买';
           break;
        case 'RMB':
           return '人民币激活';
           break;
       }
    },
    codeShow(pic){
      if(!this.type) return
        this.codeState = true
        this.codeImg = pic
      },
    handleImageRemove(e) {
      this.imageList.forEach((item, index) => {
        if (item.fileKey == e.fileKey) {
          this.imageList.splice(index, 1);
        }
      });
    },
    cateDelete(index) {
      if(this.information.isDistribution == 'y'){
        return false;
      }
      this.cateArr.splice(index, 1);
    },
    sizeDelete(index) {
      if( this.information.isDistribution=='y'){
        return false
      }
      this.sizeArr.splice(index, 1);
    },
    priceBtn() {
      this.information.modelList.forEach(item => {
        item.modelLinePrice = this.information.linePrice;
        item.modelSalePrice = this.information.salePrice;
      });
    },
    modeMath() {
      if (this.cateArr.length && this.sizeArr.length) {
        console.log(this.cateArr, this.sizeArr)
        let arr = [],
          num = 0;
        this.cateArr.map(item => {
          this.sizeArr.map(list => {
            arr.push({
              isSale: "y",
              modelCode: "",
              modelImageFileKey: item.fileKey,
              modelLinePrice: "",
              modelName: item.name,
              modelSalePrice: "",
              modelSize: list.name,
              modelStock: "",
              productCode: "",
              costPrice: "",
              id: ''
            });
          });
        });
        this.information.modelList.map(list=>{
          arr.forEach(item=>{
            if(item.modelImageFileKey == list.modelImageFileKey
              &&item.modelName == list.modelName
              &&item.modelSize == list.modelSize){
                item.isSale = list.isSale
                item.modelCode = list.modelCode
                item.modelLinePrice = list.modelLinePrice
                item.modelSalePrice = list.modelSalePrice
                item.modelStock = list.modelStock
                item.productCode = list.productCode
                item.id = list.id,
                item.costPrice = list.costPrice
              }
          })
        })
        this.information.modelList = arr;
      }
    },
    sizeAdd() {
      if(this.information.isDistribution=='y'){
        return false;
      }
      this.sizeArr.push({
        name: ""
      });
    },
    addCategory() {
      if(this.information.isDistribution=='y'){
        return false;
      }
      this.cateArr.push({
        name: "",
        fileUrl: "",
        fileKey: ""
      });
      console.log(this.cateArr);
    },
    sortChange(val,state) {
      console.log(state)
      if(!state){
        this.information.categoryParent = ""
        this.information.category = ''
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr1 = res.data.bussData;
      });
    },
    sortChange1(val,state) {
      if(!state){
        this.information.category = ''
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr2 = res.data.bussData;
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    handleClick(e) {
      this.$router.push(`/${e.name}`);
    },
    getDetailById: function() {
      let url = CONSTANT.URL.LIST.PRODUCTBYID;
      common.get(url, `/${this.id}`, res => {
        if (res.code == 200) {
          let data = res.data.bussData;
          data.imageUrls.forEach(item => {
            item.url = item.fileUrl;
          });
          this.imageList = data.imageUrls
          this.imageUrl1 = data.exampleImageUrl.fileUrl
          console.log(this.imageUrls)
          this.eidtState = true;
          this.information = data
          console.log(this.information,'ss')
          this.categoryName = data.categoryName
          
          data.sizeList.forEach(item => {
            this.sizeArr.push({
              name: item
            });
          });
          $('#summernote').summernote('code', data.detail)
          data.colorList.forEach(item => {
            this.cateArr.push({
              name: item.modelName,
              fileUrl: item.modelImageUrl,
              fileKey: item.modelImageFileKey
            });
          });
          setTimeout(() => {
            this.eidtState = false;
          });
        }
      });
    },
    editorInfo(val) {
      this.information.detail = val;
    },
    back() {
      this.$router.push({
        path: "/goodList",
        query: { pageIndex: this.currentPage }
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        levelCount:1
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    submitForm(formName) {
      if(this.imageList&&this.imageList.length){
          let arr = []
          this.imageList.map(item=>{
            arr.push(item.fileKey)
          })
          this.information.imageFileKeys = arr.join(',')
        }
        console.log(this.imageList,'this.imageList')
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let url = CONSTANT.URL.LIST.PRODUCTEDIT;
          common.post(url, this.information, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.loading = false;
              this.$router.replace({
                path: "/goodList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    linkToList() {
      this.$router.push("/goodList");
    },
    back() {
      this.$router.push({
        path: "/goodList",
        query: { pageIndex: this.currentPage }
      });
    },
    myUpload(content) {}, // 重写覆盖上传方法
    beforeImageUpload(file) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          let item = {};
          item.fileKey = data.fileKey;
          item.url = data.downloadUrl;
          this.imageList.push(item);
        });
      });
    },
    beforeCoverUpload(file) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          this.information.exampleImageFileKey = data.fileKey;
          this.imageUrl1 = data.downloadUrl;
        });
      });
    },
    imageUpload(file, index) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          this.cateArr[index].fileKey = data.fileKey;
          this.cateArr[index].fileUrl = data.downloadUrl;
          console.log(this.cateArr);
        });
      });
    },
    imgLeft(obj,index){
      var arr = this.imageList
      if(index == 0){
        arr.splice(index,1)
        arr.push(obj)
      }else{
        arr.splice(index,1)
        arr.splice(index-1, 0, obj)
      }
    },
    imgright(obj,index){
      var arr = this.imageList
      if(index == arr.length-1){
        arr.splice(index,1)
        arr.unshift(obj)
      }else{
        arr.splice(index,1)
        arr.splice(index+1, 0, obj)
      }
    }
  }
};
</script>
<style lang="scss">
.category-item {
  overflow-x: hidden;
  .name {
    float: left;
  }
}
.detail-text{
  padding: 30px;
  width: 375px;
  margin: 0px auto;
  img{
    max-width:100%;
  }
}
.arrow-wrap{
  position: relative;
  // top: -10px;
  overflow: hidden;
  .arrow-title{
    position: absolute;
    left: -20px;
    font-size: 14px;
    color: #606266;
  }
  .arrow-item{
    position: relative;
    float: left;
    width: 148px;
    margin-right: 8px;
    justify-content: space-between;
    text-align: center;
    .el-icon-arrow-left{
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .el-icon-arrow-right{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    i{
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.price-item {
  overflow: hidden;
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
  padding-left: 120px;
  .price-list {
    float: left;
    margin-right: 20px;
    .el-input {
      width: 120px !important;
      input {
        width: 120px !important;
      }
    }
  }
}
.table-cate {
  font-size: 14px;
  color: #606266;
  width: 70%;
  margin-left: 8%;
  margin-bottom: 30px;
  .table-head {
    overflow: hidden;
    display: flex;
    background-color: #d1d1d1;
    color: #333;
    .head-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .no-data{
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .table-item {
    overflow: hidden;
    display: flex;
    background-color: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    .table-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-right: 1px solid #e1e1e1;
      .el-input {
        float: left;
        width: 90% !important;
        margin-left: 5%;
        input {
          width: 100% !important;
        }
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
.mode-item {
  .mode-list {
    position: relative;
    float: left;
    margin-right: 20px;
    .el-icon-delete {
      cursor: pointer;
      position: absolute;
      right: 35px;
      bottom: 0px;
      z-index: 100;
    }
    .el-input {
      float: left;
      width: 80px !important;
      margin-bottom: 20px;
      input {
        width: 80px !important;
      }
    }
    .add {
      font-size: 26px;
      color: #409eff;
      cursor: pointer;
    }
  }
}
.category-list {
  position: relative;
  float: left;
  min-height: 170px;
  margin-right: 20px;
  width: 85px;
  text-align: center;
  .el-icon-delete {
    cursor: pointer;
    position: absolute;
    right: 40px;
    bottom: 10px;
    z-index: 100;
  }
  .add {
    font-size: 26px;
    color: #409eff;
    cursor: pointer;
  }
  .el-input {
    float: left;
    width: 80px !important;
    margin-bottom: 20px;
    input {
      width: 80px !important;
    }
  }
  .avatar-uploader,
  .avatar-uploader-icon,
  .avatar {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
  }
}
</style>
